<template>
  <cl-page>
    <view class="page">
      <!-- 搜索 -->
      <cl-sticky>
        <view class="search-bar" @tap="toSearch">
          <view class="search-bar__inner">
            <cl-icon name="search" :margin="[0, 12, 0, 0]"> </cl-icon>
            <cl-text value="搜索商品名称"></cl-text>
          </view>
        </view>
      </cl-sticky>

      <!-- 轮播图 -->
      <banner />

      <!-- 品牌介绍 -->
      <intro />

      <!-- 热门分类
      <hot-category />
       -->

      <!-- 优惠券活动 -->
      <coupon-activity />

      <!-- 促销活动 -->
      <view class="promotion" v-for="(promotion, index) in promotions" :key="index">
        <view class="promotion-header">
          <text class="promotion-title">{{ promotion?.title }}</text>
        </view>
        <view class="promotion-container">
          <scroll-view class="promotion-scroll" scroll-x="true">
            <view class="promotion-good-item" v-for="item in promotion.goods" :key="item.id">
              <goods-item :item="item" />
            </view>
          </scroll-view>
        </view>
      </view>
      <!-- 促销活动 end -->

      <!-- 热门推荐 -->
      <view class="hot">
        <view class="hot__header">
          <text class="hot__title">热门推荐</text>
          <text class="hot__desc">TOP PICKS</text>
        </view>

        <view class="hot__container">
          <cl-waterfall :ref="setRefs('list')" :column="2">
            <template #default="{ list }">
              <cl-waterfall-column v-for="(columns, index) in list" :key="index">
                <goods-item :item="item" v-for="item in columns" :key="item.id" />
              </cl-waterfall-column>
            </template>

            <template #empty>
              <cl-empty :fixed="false" :height="500" />
            </template>
          </cl-waterfall>
        </view>
      </view>

      <!-- 版本检测 -->
      <cl-version-upgrade :ref="setRefs('versionUpgrade')" />
    </view>
    <tabbar />
  </cl-page>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed } from "vue";
  import { router, useCool, usePager } from "/@/cool";
  import { onReady, onShareAppMessage } from "@dcloudio/uni-app";
  import Tabbar from "./components/tabbar.vue";
  import GoodsItem from "/@/components/goods/item.vue";
  import CouponActivity from "./components/coupon-activity.vue";
  import HotCategory from "./components/hot-category.vue";
  import Banner from "./components/banner.vue";
  import Intro from './components/intro.vue';

  const { service, refs, setRefs } = useCool();
  const { onRefresh, onData } = usePager();

  // 促销活动
  const promotions = ref([]);
  const showHotProducts = computed(() => promotions.value.length <= 0);

  // 获取热门推荐
  function refresh(params ?: any) {
    const { data, next } = onRefresh(params, { loading: false });

    onData((list) => {
      if (data.page == 1) {
        refs.list.refresh(list);
      } else {
        refs.list.append(list);
      }
    });

    return next(service.goods.info.page(data));
  }

  // 促销活动
  async function promotion() {
    await service.market.promotion
      .show().then((resp) => {
        // console.log(resp)
        const list = resp.map((i) => {
          return {
            title: i.title,
            goods: i?.goodsList.map((g) => {
              return g.good
            })
          }
        });
        promotions.value = list;
      })
  }

  // 商品搜索
  function toSearch() {
    router.push("/pages/goods/search");
  }

  onReady(async () => {
    refresh({ order: "sortNum", sort: "desc" });
    await promotion()

    // #ifdef APP
    refs.versionUpgrade?.check();
    // #endif
  });

  onShareAppMessage(() => {
    return {
      title: "薇薇大码甄选",
      path: "/pages/index/home",
    };
  });

  defineExpose({
    refresh,
  });
</script>

<style lang="scss" scoped>
  .page {
    .search-bar {
      background-color: #fff;
      padding: 24rpx;

      &__inner {
        display: flex;
        align-items: center;
        height: 70rpx;
        width: 100%;
        border-radius: 70rpx;
        background-color: #f7f7f7;
        box-sizing: border-box;
        padding: 0 24rpx;
      }
    }

    .hot {
      &__header {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 40rpx 0;
      }

      &__title {
        font-size: 32rpx;
        margin-bottom: 10rpx;
      }

      &__desc {
        font-size: 22rpx;
        color: #999;
        letter-spacing: 5rpx;
      }

      &__container {
        padding: 0 14rpx;
      }
    }

    .promotion {
      padding-left: 40rpx;

      &-header {
        margin: 40rpx 0;
      }

      &-title {
        font-size: 32rpx;
        margin-bottom: 10rpx;
      }

      &-container {
        display: flex;
        margin-bottom: 30rpx;
      }

      &-scroll {
        white-space: nowrap;
        width: 100%;
      }

      &-good-item {
        display: inline-block;
        width: 320rpx;
        margin-right: 30rpx;
      }
    }
  }
</style>